<template>
  <el-radio-group
    v-bind="$attrs"
    v-model="syncValue"
  >
    <template v-if="type==='box'">
      <el-radio
          v-for="item in options || []"
          :disabled="item[propsMerge.disabled]"
          :key="item[propsMerge.value]"
          :value="item[propsMerge.value]"
          :label="item[propsMerge.label]">
        <template #default v-if="$slots.default">
          <slot></slot>
        </template>
      </el-radio>
    </template>
    <template v-else>
      <el-radio-button
          v-for="item in options || []"
          :disabled="item[propsMerge.disabled]"
          :key="item[propsMerge.value]"
          :value="item[propsMerge.value]"
          :label="item[propsMerge.label]">
        <template #default v-if="$slots.default">
          <slot></slot>
        </template>
      </el-radio-button>
    </template>
  </el-radio-group>
</template>

<script lang="ts">
import {PropType} from "vue";
import {defaultProps, Props} from "../CommonTypes";

export default {
  name: "ElRadioPlus",
  props: {
    modelValue:{
      type: String,
      default: []
    },
    type: {
      type:String as PropType<'button'|'box'>,
      default: 'box'
    },
    options:{
      type:Array as PropType<Array<any>>,
      default:()=>[]
    },
    props: {
      type: Object as PropType<Props>,
      default: (): Props => {
        return defaultProps
      }
    },
  },
  computed:{
    propsMerge() {
      return Object.assign({},defaultProps, this.props)
    },
    syncValue:{
      get(){
        return this.modelValue
      },
      set(val){
        this.$emit('update:modelValue',val)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
